【CSS】table-layout - 表のレイアウト

CSSのtable-layoutプロパティについて解説します。

検証環境

CSS

macOS

14.1

table-layout

table-layoutは“表のレイアウト”のプロパティです。

基本構文

table-layout: 値;

値

代表的な値は次の通りです。

値	意味
auto	自動調整
fixed	列幅は１行目のセルの幅に固定

サンプル

auto

sample.html

<style>
table {
    ___ih_hl_start
    table-layout: auto;
    ___ih_hl_end
    width: 150px;
}
td {
    border: 1px solid black;
}
</style>

<table>
    <tr>
        <td>Language</td>
        <td>Type</td>
    </tr>
    <tr>
        <td>HTML</td>
        <td>Markup</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>Programming</td>
    </tr>
    <tr>
        <td>JavaScript</td>
        <td>Programming</td>
    </tr>
</table>

プレビュー

fixed

sample.html

<style>
table {
    ___ih_hl_start
    table-layout: fixed;
    ___ih_hl_end
    width: 150px;
}
td {
    border: 1px solid black;
}
</style>

<table>
    <tr>
        <td>Language</td>
        <td>Type</td>
    </tr>
    <tr>
        <td>HTML</td>
        <td>Markup</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>Programming</td>
    </tr>
    <tr>
        <td>JavaScript</td>
        <td>Programming</td>
    </tr>
</table>

プレビュー